//
// FormMixins
// 区区电脑
// 2023 年 02 月 02 日 10:39

import {ref, reactive} from "vue";

export function FormMixins() {
    // 实验
    const other = reactive({
        value: 0
    })
    // 表单ref 对象
    const ELForm = ref();
    // 显示表单
    const visible = ref(false);
    // 标题
    const title = ref("标题");
    // 只是查看
    const isView = ref(false);
    // 移动设备
    const windowWidth = ref(0);
    windowWidth.value = document.documentElement.clientWidth;
    const isMobile = ref(windowWidth.value <= 750);
    $addLowResize(({width}) => {
        windowWidth.value = width;
        isMobile.value = windowWidth.value <= 750;
        layout.col2 = isMobile.value ? 'width: calc(100% - 32px)' : 'width: calc(50% - 32px)'
    })
    // 布局
    const layout = {
        col1: 'width: calc(100% - 32px)',
        col2: isMobile.value ? 'width: calc(100% - 32px)' : 'width: calc(50% - 32px)',
        modalWidth: (value) => isMobile.value ? windowWidth.value : value,
        modalMinWidth: (value) => isMobile.value ? windowWidth.value : value,
        modalHeight: (value) => value || (isMobile.value ? document.documentElement.clientHeight * 0.8 : 400)
    };
    // 加载状态
    const isLoading = ref(false);
    // 提交状态
    const isSubmitting = ref(false);
    // 数据
    const state = reactive({
        options: {},
        model: {}
    });
    // 事件
    const event = reactive({
        ok: () => {},
        cancel: () => {}
    })

    // 显示
    function setOptions(config) {
        title.value = config.title;
        isLoading.value = false
        isSubmitting.value = false
        visible.value = true;
        state.options = config.options || {};
        event.ok = config.ok;
        event.cancel = config.cancel;
        isView.value = config.isView;
    }

    // 提交成功
    function submitSuccess(val) {
        visible.value = false;
        event.ok && event.ok(val);
    }

    // 关闭表单
    function cancelClick() {
        visible.value = false;
        event.cancel && event.cancel();
    }

    return {
        other,
        ELForm,
        visible,
        title,
        layout,
        isLoading,
        isSubmitting,
        isView,
        state,
        event,
        setOptions,
        submitSuccess,
        cancelClick,
    }
}
